<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>真伪查询</el-breadcrumb-item>
      <el-breadcrumb-item>真伪查询</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="always" class="card">
      <el-form class="content">
        <h1 class="title">必达智慧报告真伪查询</h1>
        <el-form-item>
          <el-input
            type="type"
            placeholder="输入文件的防伪编码"
            v-model="form.creditCode"
            autocomplete="off"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.code"
            autocomplete="off"
            placeholder="验证码"
            prefix-icon="el-icon-phone"
          >
            <el-button
              slot="append"
              style="color: white; background-color: #1890ff"
              v-show="showTime"
              @click="sendEmail(form.creditCode)"
              >发送验证码</el-button
            >
            <el-button
              slot="append"
              style="
                color: white;
                background-color: #1890ff;
                margin-left: -20px;
              "
              v-show="!showTime"
              >{{ sendTime }}秒</el-button
            >
          </el-input>
        </el-form-item>
        <el-form-item class="login1">
          <el-button type="primary" @click="checkIfTrue()" style="width: 100%" size="medium"
            >真伪查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getadmin,getfilebynumber,putCode } from '@/http/api';
export default {
  data() {
    return {
      form: {
        creditCode: "", //文件信用编码
        code: "", //验证码
      },
      showTime: true /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */,
      sendTime: "" /* 倒计时 计数器 */,
      timer: null,
      code1:''
    };
  },
  methods:{
    checkIfTrue(){
      if (this.form.creditCode === "" || this.form.creditCode == null) {
        this.$message({
          duration: 1000,
          message: "文件防伪编码不能为空！",
          type: "false",
        });
        this.form.creditCode = "";
      } else if (this.form.code != this.code1) {
        this.$message({
          duration: 1000,
          message: "验证码错误！",
          type: "false",
        });
      } else {
        const data = {
          number: this.form.creditCode,
					adminId: localStorage.getItem("id")
        };
        getfilebynumber(data).then((res) => {
          if (res.data =='') {
            this.$message({
              duration: 1000,
              message: "查无此件！",
              type: "false",
            });
          } else {
            this.$router.push( { name: "truthdetail", query: { id:  res.data.file} } );
            
          }
        });
      }
    },
    sendEmail() {
      if (this.form.creditCode === "" || this.form.creditCode == null) {
        this.$message({
          duration: 1000,
          message: "文件防伪编码不能为空！",
          type: "false",
        });
        this.form.creditCode = "";
      } else {
        const TIME_COUNT = 60; //  更改倒计时时间
        if (!this.timer) {
          this.sendTime = TIME_COUNT;
          this.showTime = false;
          this.timer = setInterval(() => {
            if (this.sendTime > 0 && this.sendTime <= TIME_COUNT) {
              this.sendTime--;
            } else {
              this.showTime = true;
              clearInterval(this.timer); // 清除定时器
              this.timer = null;
            }
          }, 1000);
          const data = {
            id:localStorage.getItem("id"),
          };
          getadmin(data).then((res) => {
            console.log(res);
            const data = {
              phone: res.data.phone,
          };
          putCode(data).then((res) => {
            console.log(res);
            this.code1 = res.data;
          });
          });
        }
      }
    },
  }
};
</script>

<style lang="less" scoped>
.card {
  height: 100vh;
}
.content{
    
  border-radius: 10px;
  margin: 0 auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: rgb(251, 251, 251);
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  opacity: 0.9;
  margin-top: 20vh;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
//   height: 100%;
}
.form-item{
  margin-bottom: 20px;
}
.login1{
  display: flex;
  justify-content: center;
}
.title{
  margin-bottom: 30px;
  text-align: center;
  font-size: 24px;
}
</style>